<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float属性</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
        }
        #father{
            border: 1px #000 solid;
        }
        .layer01{
            border: 1px #f00 dashed;
            float: left;
        }
        .layer02{
            border: 1px #00f dashed;
            float: right;
        }
        .layer03{border: 1px #060 dashed;float: left;}
        .layer04{
            border: 1px #666 dashed;
            font-size: 12px;
            line-height: 20px;
            float: left;
        }
        .clear{
            clear: both;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="father">
        
        <div class="layer01"><img width="500" src="https://pic.52112.com/180209/180209_46/DEy44rBM4r.jpg" alt="鞋子"></div>
        <div class="layer02"><img width="50" src="https://pic.ntimg.cn/file/20200818/12340304_005542619031_2.jpg" alt="日用品"></div>
        <div class="layer03"><img width="50" src="https://seopic.699pic.com/photo/50063/5254.jpg_wh1200.jpg" alt="图书"></div>
        <div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。</div>
        <div class="clear"></div>
    </div>
</body>
</html>